<template>
	<view class="container">
		<!--  -->
		<view class="header">
			<template v-for="(v,i) in headList" :key="i">
				<view @click="changeHead(i)" :class="i==headIndex?'check':''">{{v}}</view>
			</template>
		</view>
		<!-- 支付内容 -->
		<view class="header_statu">
			<template v-for="(v,i) in statuList" :key="i">
				<view @click="changeStatus(i)" :class="i==currentIndex?'check':''">{{v}}</view>
			</template>
		</view>
		<swiper class="body" :current="currentIndex" @change="changeCurrent">
			<swiper-item v-for="(v,i) in statuList" :key="i">
				<view class="body_box">
					<view class="not_oders">
						<view class="iconfont icon-meiyoudingdan"></view>
						<view class="text">
							暂无订单记录
						</view>
					</view>

				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const headList = ref(['特惠酒店民俗', '酒店住宿'])
	const headIndex = ref(0)

	const statuList = ref(['全部', '待支付', '待使用', '取消/退款'])
	const currentIndex = ref(0)

	function changeHead(num) {
		headIndex.value = num
	}

	function changeStatus(num) {
		currentIndex.value = num
	}

	// 滑动
	function changeCurrent(e) {
		// console.log(e.detail.current)
		currentIndex.value = e.detail.current
	}
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: column;

		.header {
			width: 100%;
			height: 100rpx;
			background: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 36rpx;
			border-bottom: 1rpx solid #f8f8f8;
			box-sizing: border-box;

			view {
				line-height: 100rpx;
				border-bottom: 6rpx solid rgba(0, 0, 0, 0);
			}

			.check {
				font-weight: 600;
				color: orangered;
				border-color: orangered;
			}
		}

		.header_statu {
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: gray;
			border-bottom: 1rpx solid #f8f8f8;

			view {
				line-height: 70rpx;
				border-bottom: 4rpx solid rgba(0, 0, 0, 0);
			}

			.check {
				font-weight: 600;
				color: orangered;
				border-color: orangered;
			}
		}

		.body {
			width: 100%;
			flex: 1;

			swiper-item,
			.body_box {
				width: 100%;
				height: 100%;
				overflow: auto;

				.not_oders {
					width: 100%;
					text-align: center;
					padding-top: 30%;
					color: #c0c4cc;

					.iconfont {
						font-size: 150rpx;
					}

					.text {
						margin-top: 20rpx;
					}
				}

			}
		}

	}
</style>